<template>
  <view class="mian">
	<view id="captureArea"  class="flex flex-direction">		
		<view class="class_h" style="background-color: #fff">
			<view class="top" @click="return_step">					
				<image src="../../../static/resource/back.png" mode="aspectFill" style="width: 74px;height: 30px;"></image>				
			</view>
			<text class="task_name">订单管理</text>
		</view>		
		<view class="content_one">
			<view class="flex pt-50 pl-30 pr-30">
				<view class="flex flex-direction justify-between">
					<view class="containersss">
						<view class="member-bg"  :style="{ backgroundImage: `url(${userInfo.token ? userInfo.member_level : 'https://tangmaibao.site/static/upload/f42b5b566c89345e/e83497a25fc61e7d.png'})`}"></view>
						<image class="mine__bg--avatar" mode="aspectFill" style="background:" v-if="!userInfo.token" src="/static/mine/avatar.png" @click="userInfo.token?setBase():$routers.routeToLogin(recommendId)"></image>
						<image class="mine__bg--avatar" mode="aspectFill" style="background:" v-if="userInfo.token" :src="userInfo.wx_icon?userInfo.wx_icon:'/static/mine/avatar.png'" @click="setBase()"></image>	
					</view>					
				</view>
				<view class="flex flex-direction" style="margin-left: 30px;">
					<text class="text-bold">{{userInfo.nickName}}</text>
					<view class="flex flex-direction mt-20" style="color: #666666;">
						<view class="flex" style="gap: 18px;">
							<text class="mt-10">性別：{{userInfo.gender}}</text>
							<text class="mt-10">身高：{{userInfo.heights}}</text>
						</view>
						<view class="flex mt-10" style="gap: 18px;">
							<text class="mt-10">年龄：{{userInfo.age}}</text>
							<text class="mt-10">体重：{{userInfo.weights}}</text>
						</view>
					</view>					
				</view>
			</view>
			
			<view class="flex justify-center align-center pt-50 mb-20">
				<image src="../../../static/order/Line59.png" style="height: 1px;"></image>
			</view>
					
			<view class="flex justify-start align-center text-center pl-30 pt-20">
				<view class="flex">
					<image src="../../../static/resource/sugar_icon.png" mode="aspectFill" style="width: 18px;height: 18px;"></image>
				</view>
				<text class="effect_t ml-15">血糖（mmol/L）</text>
			</view>	
			
			<view class="flex flex-wrap  pt-30 pl-30 pr-30 ">
				<view class="flex health" v-for="(item,index) in userInfo.blood_measure_sugar " :key="index">
					<text class="h_name">{{item.sugar_value}}</text>
					<text class="h_name">血糖中位数</text>
					<view class="flex align-center justify-center text-center pt-20 pb-30">
						<text class="flex">{{item.blood_sugar}}</text>
						<text class="effect_t">mmol/L</text>
					</view>
				</view>
			</view>
			
			<view class="flex justify-start align-center text-center pl-30 mt-30">
				<view class="flex">
				  <image src="/static/resource/measure.png" mode="aspectFill" style="width: 3px;height: 10px;"></image>
				</view>
				<text class="effect_t ml-15">分层占比</text>
			</view>
			
			<view class="flex justify-start align-center text-center pl-30 mt-40">
				<canvas
				  canvas-id="bloodChart"
				  id="bloodChart"
				  class="chart"
				></canvas>
				
				<view class="legend ml-50">
				  <view class="legend-item">
					<view class="dot" style="background:#F56202"></view> 偏高
				  </view>
				  <view class="legend-item">
					<view class="dot" style="background:#FDC24E"></view> 偏低
				  </view>
				  <view class="legend-item">
					<view class="dot" style="background:#1EC157"></view> 正常
				  </view>
				</view>
				
				
			</view>
			
			<view class="flex justify-start align-center text-center pl-30 mt-30">
				<view class="flex">
				  <image src="/static/resource/measure.png" mode="aspectFill" style="width: 3px;height: 10px;"></image>
				</view>
				<text class="effect_t ml-15">达标率</text>
			</view>
			
			<view class="flex pt-20 pl-20 pr-30 align-center text-center ">			
				<view class="progress-wrap">
					<view class="progress-bg">
					
					  <view
						class="progress-bar"
						:style="{ width: progress + '%' }"
					  >
						<text class="progress-text">{{ progress }}%</text>
					  </view>
					</view>
				</view>
			</view>
			
			<view class="flex justify-start align-center text-center pl-30 mt-30">
				<view class="flex">
				  <image src="/static/resource/measure.png" mode="aspectFill" style="width: 3px;height: 10px;"></image>
				</view>
				<text class="effect_t ml-15">健康建议</text>
			</view>
			<view class="mt-20 ml-20 mr-20  p-20 mb-30"  style="border-radius: 8px; font-size: 28rpx;line-height: 44rpx; color: #666666;background-color: #ECF0F6;">
				
				<text >近一周血糖 存在波动，但整体呈下降趋势，请注意保持健康生活方式！</text>
			</view>
		
		</view>
		
		<view class="content_two">
			
			<view class="flex justify-start align-center text-center pl-30 mt-30">
				<view class="flex">
					<image src="../../../static/resource/pressure_icon.png" mode="aspectFill" style="width: 18px;height: 18px;"></image>
				</view>
				<text class="effect_t ml-15">血压（mmhg）</text>
			</view>
			
			<view class="flex flex-wrap  pt-30 pl-30 pr-30 ">
				<view class="flex health" v-for="(item,index) in userInfo.blood_measure_sugar " :key="index">
					<text class="h_name">{{item.sugar_value}}</text>
					<text class="h_name">血糖中位数</text>
					<view class="flex align-center justify-center text-center pt-20 pb-30">
						<text class="flex">{{item.blood_sugar}}</text>
						<text class="effect_t">mmol/L</text>
					</view>
				</view>
			</view>
			
			<view class="flex justify-start align-center text-center pl-30 mt-30">
				<view class="flex">
				  <image src="/static/resource/measure.png" mode="aspectFill" style="width: 3px;height: 10px;"></image>
				</view>
				<text class="effect_t ml-15">分层占比</text>
			</view>
			
			<view class="flex justify-start align-center text-center pl-30 mt-40">
				<canvas
				  canvas-id="bloodChartPressure"
				  id="bloodChartPressure"
				  class="chart"
				></canvas>
				
				<view class="legend ml-50">
				  <view class="legend-item">
					<view class="dot" style="background:#F56202"></view> 偏高
				  </view>
				  <view class="legend-item">
					<view class="dot" style="background:#FDC24E"></view> 偏低
				  </view>
				  <view class="legend-item">
					<view class="dot" style="background:#1EC157"></view> 正常
				  </view>
				</view>
				
				
			</view>
			
			<view class="flex justify-start align-center text-center pl-30 mt-30">
				<view class="flex">
				  <image src="/static/resource/measure.png" mode="aspectFill" style="width: 3px;height: 10px;"></image>
				</view>
				<text class="effect_t ml-15">达标率</text>
			</view>

			<view class="flex pt-20 pl-20 pr-30 align-center text-center ">			
				<view class="progress-wrap">
					<view class="progress-bg">
					
					  <view
						class="progress-bar"
						:style="{ width: progress + '%' }"
					  >
						<text class="progress-text">{{ progress }}%</text>
					  </view>
					</view>
				</view>
			</view>

			
			<view class="flex justify-start align-center text-center pl-30 mt-30">
				<view class="flex">
				  <image src="/static/resource/measure.png" mode="aspectFill" style="width: 3px;height: 10px;"></image>
				</view>
				<text class="effect_t ml-15">健康建议</text>
			</view>
			<view class="mt-20 ml-20 mr-20  p-20 mb-30"  style="border-radius: 8px; font-size: 28rpx;line-height: 44rpx; color: #666666;background-color: #ECF0F6;">
				
				<text >近一周 血压 存在波动，但整体呈下降趋势，请注意保持健康生活方式！</text>
			</view>
			
		</view>
		
		
	</view>
	<view class="flex pb-30 flex-direction" style="width: 93%;margin-left: 32rpx;margin-right: 40rpx;">
		<button formType="submit" style="background: #FFC116; color: white; width: 100%;margin-right: 40rpx; margin-top: 20rpx;"   @click="share_sign()">分享</button>
	</view>
    <canvas canvas-id="shareCanvas" style="width: 750rpx; height: 1334rpx; position: absolute; left:-9999px;" />
	
	
  </view>
</template>

<script>
import pop from "@/components/pop/pop";
import TimeCurveChart  from '@/components/dui-line-chart/TimeCurveChart.vue'

export default {
		components: {
		   "regional-selection": pop,
					TimeCurveChart
		 },	
	data() {
		return {	
			...getApp().globalData.config,
			progress:10,
			chartData: [
			   { time: "08:00", value: 90 },
			   { time: "10:00", value: 100 },
			   { time: "12:00", value: 80 },
			   { time: "14:00", value: 110 },
			   { time: "16:00", value: 95 }
			],
			userInfo:{}
	    }
	},
   onShow() {	
	  // this.userInfo=uni.getStorageSync('userInfo');	
	  this.query_report()
   },	
   onReady() {
    this.drawBloodChart()
	this.drawBloodChartPressure()

   },
   methods: {	  
	   
	...getApp().globalData.function, 
	
	 share_sign() {
	   uni.showLoading({ title: '生成中...' })
	         const query = uni.createSelectorQuery().in(this)
	         query.select('#captureArea').boundingClientRect(rect => {
	           if (!rect) {
	             uni.hideLoading()
	             return uni.showToast({ title: '未找到区域', icon: 'none' })
	           }
	   
	           const canvasId = 'shareCanvas'
	           const ctx = uni.createCanvasContext(canvasId, this)
	           const w = rect.width
	           const h = rect.height
	   
	           // 白底
	           ctx.setFillStyle('#fff')
	           ctx.fillRect(0, 0, w, h)
	   
	           // 绘制头像
	           const avatarPath = this.avatar
	           uni.getImageInfo({
	             src: avatarPath,
	             success: (res) => {
	               ctx.drawImage(res.path, 20, 20, 80, 80)
	   
	               // 昵称
	               ctx.setFontSize(20)
	               ctx.setFillStyle('#333')
	               ctx.fillText(this.nickname, 120, 60)
	   
	               // 再画环图
	               ctx.drawImage('/static/test/bloodChart.png', 20, 120, 200, 200)
	   
	               ctx.draw(false, () => {
	                 uni.canvasToTempFilePath({
	                   canvasId,
	                   success: (res2) => {
	                     uni.saveImageToPhotosAlbum({
	                       filePath: res2.tempFilePath,
	                       success: () => {
	                         uni.hideLoading()
	                         uni.showToast({ title: '已保存到相册', icon: 'success' })
	                       }
	                     })
	                   },
	                   fail: (err) => {
	                     console.error('保存失败', err)
	                     uni.hideLoading()
	                     uni.showToast({ title: '生成失败', icon: 'none' })
	                   }
	                 }, this)
	               })
	             }
	           })
	         }).exec()
	       
	  },
	
	query_report(){
		let obj={
			token:uni.getStorageSync('userInfo').token
		}
	  this.$http.userReport(obj).then(res=>{
		 if(res.resCode=='9999'){
			 this.userInfo=res.data
		 }
	  })	
	},
	
	return_step(){
	  	this.$routers.router('/pages/mine/index','switchTab') 
	},
	  
    drawBloodChart() {
      const ctx = uni.createCanvasContext('bloodChart', this)
     const width = 160
           const height = 160
           const cx = width / 2
           const cy = height / 2
           const outerRadius = 60
           const innerRadius = 45


      // 八个时间点及状态
      const bloodData = [
        { time: '凌晨', status: '正常' },
        { time: '空腹', status: '偏高' },
        { time: '早餐后', status: '偏高' },
        { time: '午餐前', status: '正常' },
        { time: '午餐后', status: '偏低' },
        { time: '晚餐前', status: '正常' },
        { time: '晚餐后', status: '正常' },
        { time: '睡前', status: '偏低' },
      ]

      // 颜色对应
      const colorMap = {
        偏高: '#F56202',
        偏低: '#FDC24E',
        正常: '#1EC157',
      }

      const segmentAngle = (2 * Math.PI) / bloodData.length
      let startAngle = -Math.PI / 2

      // 绘制8段环
      bloodData.forEach((item, index) => {
        const endAngle = startAngle + segmentAngle
        ctx.beginPath()
        ctx.arc(cx, cy, outerRadius, startAngle, endAngle)
        ctx.arc(cx, cy, innerRadius, endAngle, startAngle, true)
        ctx.closePath()
        ctx.setFillStyle(colorMap[item.status])
        ctx.fill()
        startAngle = endAngle
      })

      // 中心文字
      ctx.setFontSize(18)
      ctx.setFillStyle('#333')
      ctx.setTextAlign('center')
      ctx.fillText('血糖', cx, cy - 5)
      ctx.setFontSize(14)
      ctx.setFillStyle('#888')
      ctx.fillText('概况', cx, cy + 20)

      // 外部时间点文字
      bloodData.forEach((item, i) => {
        const angle = (-Math.PI / 2) + i * segmentAngle + segmentAngle / 2
        const textRadius = outerRadius + 20
        const tx = cx + Math.cos(angle) * textRadius
        const ty = cy + Math.sin(angle) * textRadius

        ctx.setFontSize(12)
        ctx.setFillStyle('#333')
        ctx.setTextAlign('center')
        ctx.setTextBaseline('middle')
        ctx.fillText(item.time, tx, ty)
      })

      ctx.draw()
    },
	drawBloodChartPressure() {
	  const ctx = uni.createCanvasContext('bloodChartPressure', this)
	 const width = 160
	       const height = 160
	       const cx = width / 2
	       const cy = height / 2
	       const outerRadius = 60
	       const innerRadius = 45
	
	
	  // 八个时间点及状态
	  const bloodData = [
	    { time: '凌晨', status: '正常' },
	    { time: '空腹', status: '偏高' },
	    { time: '早餐后', status: '偏高' },
	    { time: '午餐前', status: '正常' },
	    { time: '午餐后', status: '偏低' },
	    { time: '晚餐前', status: '正常' },
	    { time: '晚餐后', status: '正常' },
	    { time: '睡前', status: '偏低' },
	  ]
	
	  // 颜色对应
	  const colorMap = {
	    偏高: '#F56202',
	    偏低: '#FDC24E',
	    正常: '#1EC157',
	  }
	
	  const segmentAngle = (2 * Math.PI) / bloodData.length
	  let startAngle = -Math.PI / 2
	
	  // 绘制8段环
	  bloodData.forEach((item, index) => {
	    const endAngle = startAngle + segmentAngle
	    ctx.beginPath()
	    ctx.arc(cx, cy, outerRadius, startAngle, endAngle)
	    ctx.arc(cx, cy, innerRadius, endAngle, startAngle, true)
	    ctx.closePath()
	    ctx.setFillStyle(colorMap[item.status])
	    ctx.fill()
	    startAngle = endAngle
	  })
	
	  // 中心文字
	  ctx.setFontSize(18)
	  ctx.setFillStyle('#333')
	  ctx.setTextAlign('center')
	  ctx.fillText('血糖', cx, cy - 5)
	  ctx.setFontSize(14)
	  ctx.setFillStyle('#888')
	  ctx.fillText('概况', cx, cy + 20)
	
	  // 外部时间点文字
	  bloodData.forEach((item, i) => {
	    const angle = (-Math.PI / 2) + i * segmentAngle + segmentAngle / 2
	    const textRadius = outerRadius + 20
	    const tx = cx + Math.cos(angle) * textRadius
	    const ty = cy + Math.sin(angle) * textRadius
	
	    ctx.setFontSize(12)
	    ctx.setFillStyle('#333')
	    ctx.setTextAlign('center')
	    ctx.setTextBaseline('middle')
	    ctx.fillText(item.time, tx, ty)
	  })
	
	  ctx.draw()
	},

  },
}
</script>

<style scoped>
 @import "./index.css";
</style>
